<template>
  <div v-if="loadComplete" class="scroll">
    <!--  作业 题目  -->
    <div v-if="selected === '0'" style="margin-left: 18px;margin-top: 15px;" class="row content-size-16">
      <!--   左半部分   -->
      <div :style="{width:getPageWidth()}" class="column ">

        <div class="radiu-box" style="padding: 10px">
          <!--题目+分值-->
          <div class="row" style="justify-content: space-between">
            <div class="row" style="flex: 1">
              <i class="iconfont colorF90 default-icon" :class="getIconByType(itemfromProp.type+'')" />
              <div
                v-if="(!!itemfromProp.title || !!itemfromProp.plainText) && itemfromProp.type != 7"
                style="margin-left: 4px;margin-right: 15px;font-size: 19px;color: #555555;font-weight: 650"
                class="list-group-content default-text"
                v-html="itemfromProp.title || itemfromProp.plainText"
              />
              <div
                v-if="itemfromProp.type == 7 || !!itemfromProp.dlsCourseScreencaptureQuestion"
                style="margin-left: 4px;margin-right: 15px;font-size: 19px;color: #555555;font-weight: 650"
                class="list-group-content default-text"
                v-html="'截屏题'"
              />
            </div>
            <div class="row" style="height: 22px;line-height: 22px">
              <span>{{ getScore() }}分</span>

              <el-dropdown
                v-if="user.userType!==1 && !readOnly"
                trigger="click"
                size="mini"
                placement="bottom-start"
                class="child"
                style="font-weight: 700;margin: 0 10px"
              >
                <span class="iconfont iconziyuan9" style="color: #999999;font-size: 14px;" />
                <el-dropdown-menu>
                  <el-dropdown-item @click.native="edit()">修改</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

            </div>
          </div>
          <div class="row" v-if="!!itemfromProp.dlsCourseScreencaptureQuestion || itemfromProp.type == 7" style="margin-top: 20px">
            <el-image
              v-if="!!itemfromProp.dlsCourseScreencaptureQuestion && !!itemfromProp.dlsCourseScreencaptureQuestion.picture"
              style="margin-left: 4px;margin-right: 15px;"
              :src="itemfromProp.dlsCourseScreencaptureQuestion.picture"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
            <el-image
              v-if="!!!itemfromProp.dlsCourseScreencaptureQuestion && itemfromProp.type == 7 && !!itemfromProp.plainText"
              style="margin-left: 4px;margin-right: 15px;"
              :src="itemfromProp.plainText"
            >
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
          <!--截止时间-->
          <div style="margin:20px 0;color: #999999;font-size: 15px" class="row">
            <span class="iconfont iconziyuan1" style="color: transparent" />
            <span>截止时间：</span>
            <span style="flex: 1">{{ itemfromProp.stopTime?itemfromProp.stopTime:'无截止时间' }}</span>
            <span
              v-if="user.userType === 1 && itemfromProp.status === 1"
              style="float: right;font-size: 18px;"
              class="colorF90"
            >已批改</span>
          </div>
          <!--     单选 多选 不定 连线     -->
          <div
            v-if="itemfromProp.dlsCourseQuestion && !isSubjective && !isPaper"
            class="content-size-14"
            style="margin-left: 30px"
          >
            <!--     单选 多选 不定       -->
            <div v-if="parseInt(itemfromProp.dlsCourseQuestion.catCode)!==5">
              <div
                v-for="(item,index) in itemfromProp.dlsCourseQuestion.questionOptionList"
                :key="index"
                style="margin-top: 10px"
              >
                <div class="row">
                  <i
                    :class="item.isChecked?catCodeSelectedClass:catCodeClass"
                    class="iconfont"
                    style="cursor: pointer"
                    @click="selectAnswer(item,index)"
                  />
                  <span style="margin-left: 15px" :style="{color:getOptionColor(item)}">{{ item.optionIndex }}{{ itemfromProp.dlsCourseQuestion.catCode==='4'?'':'、' }}</span>
                  <span style="flex: 1" v-html="item.optionContent" />
                  <span v-if="user.userType === 1 && isSubmit">{{ item.studentCount ?item.studentCount:0 }}人</span>
                </div>
              </div>
            </div>
            <!--    连线        -->
            <div
              v-if="parseInt(itemfromProp.dlsCourseQuestion.catCode)===5"
              style="width: 100%;margin-top: 3px;line-height: 40px;"
              class="row"
            >
              <div class="column" style="width: 50%;">
                <span>左侧选项</span>
                <div v-for="(item,index) in leftOptionList" :key="index">
                  <div class="row" style="align-items: center;margin-left: 20px;width: 100%;margin-top: 3px;">
                    <span>{{ item.optionIndex }}.</span>
                    <div style="margin-left: 8px;flex:1" v-html="item.optionContent" />
                    <el-select
                      v-model="item.otherIndex"
                      style="width: 100px"
                      placeholder="请选择"
                      :disabled="canOperation()"
                      @change="changeIndex"
                    >
                      <el-option
                        v-for="(item1,index1) in rightOptionList"
                        :key="index1"
                        :label="item1.optionIndex"
                        :value="item1.optionIndex"
                      />
                    </el-select>
                    <!--                    :style="{color:item.otherIndex === item.selectedAnswer?'#00CF90':'#e60012'}"-->
                    <span class="colorF90" style="margin-left: 15px;width: 20px">{{ item.selectedAnswer }}</span>
                  </div>
                </div>
              </div>

              <div class="column" style="width: 45%;margin-left: 5%">
                <span>右侧选项</span>
                <div v-for="(item,index) in rightOptionList" :key="index" style="margin-left: 20px">
                  <div class="row" style="margin-top: 3px;">
                    <span>{{ item.optionIndex }}.</span>
                    <div style="margin-left: 8px" v-html="item.optionContent" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div v-if="isPaper">
            <PaperAnswerView
              ref="paper"
              :paper-id="itemfromProp.testpaperDetail.testpaper.id"
              :can-operation="(!itemfromProp.isSubmit || itemfromProp.isSubmit === 0) && user.userType === 1"
              :testpaper-data-prop="itemfromProp.testpaperDetail"
            />
          </div>

          <!--     填空题     -->
          <div
            v-if="user.userType===1 && itemfromProp.dlsCourseQuestion && itemfromProp.dlsCourseQuestion.catCode === '6'"
          >
            <div v-for="(item1,index1) in itemfromProp.dlsCourseQuestion.questionOptionList" :key="index1">
              <div class="row" style="line-height: 40px;margin-top: 8px;margin-left: 15px">
                <span>{{ item1.optionIndex }}.</span>
                <el-input
                  v-if="!item1.isrichtext || item1.isrichtext === 0 "
                  v-model="item1.optionContent"
                  :readonly="itemfromProp.isSubmit === 1 || paperType === '6'"
                  style="width: 400px;margin: 0 5px"
                />
                <span
                  v-if="item1.isrichtext === 1"
                  style="width: 400px;margin: 0 5px;word-wrap:break-word"
                  v-html="item1.optionContent"
                />
                <img
                  v-if="!itemfromProp.isSubmit && paperType !== '6'"
                  :src="require('@/assets/img/gongshi.png')"
                  style="width: 22px;height: 22px;margin-top: 9px"
                  @click="showDialog(index1,item1)"
                >
                <img
                  v-if="!itemfromProp.isSubmit && paperType !== '6'"
                  :src="require('@/assets/img/guanbi.png')"
                  style="width: 22px;height: 22px;margin-top: 9px"
                  @click="close(item1)"
                >
              </div>
            </div>
          </div>

          <!-- 截屏题答案 -->
          <div
            v-if="false && !!itemfromProp.dlsCourseScreencaptureQuestion && !!itemfromProp.dlsCourseScreencaptureQuestion.screenOptions"
          >
            <div
              v-for="(item, index) in itemfromProp.dlsCourseScreencaptureQuestion.screenOptions"
              :key="index"
              style="margin-top: 10px"
            >
              <div class="row">
                <i
                  :class="!!item.isChecked?catCodeSelectedClass:catCodeClass"
                  class="iconfont"
                  style="cursor: pointer"
                  @click="selectAnswer(item,index)"
                />
                <span style="margin-left: 15px" :style="{color:getOptionColor(item)}">{{ item.optionIndex }}{{ '、' }}</span>
                <span style="flex: 1" v-html="item.optionContent" />
                <span v-if="user.userType === 1 && isSubmit">{{ item.studentCount ?item.studentCount:0 }}人</span>
              </div>
            </div>
          </div>
        </div>
        <!--  截屏论述答案区域     -->
        <div v-if="getPageWidth() === '60%' && !isPaper && itemfromProp.type == 7 && !!itemfromProp.dlsCourseQuestion && (itemfromProp.dlsCourseQuestion.catCode == '8' || itemfromProp.dlsCourseQuestion.catCode == '9') && !!itemfromProp.dlsCourseQuestion.answerOptions" class="content-size-16 column" style=";margin-top: 30px">
          <span>答案</span>
          <el-input
            v-for="(item1,index) in itemfromProp.dlsCourseQuestion.answerOptions"
            v-model="item1.optionContent"
            type="textarea"
            :readonly="true"
            unselectable="on"
            :rows="4"
            resize="none"
            style="margin-top: 10px;font-size: 16px"
          />
        </div>
        <!--  内容区域     -->
        <div v-if="getPageWidth() === '60%' && !isPaper" class="content-size-16 column" style=";margin-top: 30px">
          <span>说明</span>
          <el-input
            v-model="describe"
            type="textarea"
            :readonly="true"
            unselectable="on"
            :rows="4"
            resize="none"
            style="margin-top: 10px;font-size: 16px"
          />
        </div>
        <!--附件-->
        <div
          v-for="(item,index) in attachmentList"
          :key="index"
          class="row"
          style="align-items: center;margin: 10px 0;"
        >
          <i
            class="iconfont colorF90"
            :class="getFileIconByExt(item.fileType+'',item.resUrl,(!item.httpUrl && !item.panFileId))"
          />
          <div v-if="!item.resUrl" style="margin-left: 2px" class="list-group-content" @click="previewFile(item)">{{
            item.name }}
          </div>
          <a v-if="item.resUrl" style="margin-left: 2px" :href="item.resUrl" target="_blank">{{ item.name }}</a>
          <i
            v-if="!item.resUrl && !item.panFileId"
            class="iconfont iconxiazai cursor-pointer"
            style="margin-left: 10px"
            @click="downLoadFile(item)"
          />
        </div>

        <div
          v-if="user.userType===1 && getPageWidth() === '80%' && !readOnly && itemfromProp.isSubmit!== 1"
        >
          <el-button type="primary" style="float: right;margin: 10px;width: 120px" @click="commitHomeWork">提交作业
          </el-button>
        </div>
      </div>

      <div v-if="getPageWidth() === '60%'" style="width: 1%" />
      <!--   右半部分  只有主观题和测验才显示 -->
      <div v-if="getPageWidth() === '60%'" style="width: 38%">
        <!--    未归档 或者 有文件 不然就一个边框在那里 -->
        <div
          v-if="!readOnly || fileList.length>0"
          style="width: 100%;padding: 10px;max-height: 250px;box-sizing: border-box;overflow-y: auto"
          class="column radiu-box content-size-16"
        >
          <div v-if="!readOnly" style="position: relative">
            <div class="column" style="justify-content: center">
              <div>
                <el-button style="width: 120px;top:0;" :loading="isUpload" @click="showTaskUploadFileDialog = true">
                  作业上传
                </el-button>
              </div>

              <div v-if="isSubmit">
                <el-button
                  style="width: 120px;height: 40px;position: absolute;top:0px"
                  type="primary"
                  @click="backCommit"
                >撤销提交
                </el-button>
              </div>
            </div>
            <el-button
              v-if="!isSubmit"
              style="width: 120px;height: 40px;left: 150px;position: absolute;top:0px"
              :loading="isUpload"
              :disabled="readOnly"
              type="primary"
              @click="commitHomeWork"
            >提交
            </el-button>
          </div>

          <div
            v-for="(item1,index1) in fileList"
            :key="index1"
            class="row"
            style="min-height: 35px;line-height: 35px"
            :style="{marginTop:index1===0?'5px':'0px'}"
          >

            <i
              class="iconfont colorF90 default-icon"
              :class="getFileIconByExt((item1.fileType||item1.type||item1.format)+'',item1.resUrl)"
            />
            <div
              style="margin-left: 4px;line-height: 35px;cursor: pointer;width: 70%;align-items: center"
              class="list-group-content default-text single"
              @click="previewFile(item1)"
            >{{ item1.name }}
            </div>
            <i
              v-if="!isSubmit"
              class="iconfont iconziyuan10"
              style="color: #aaaaaa;line-height: 35px;cursor: pointer;font-size: 14px"
              @click="delFile(item1,index1)"
            />
            <i
              v-if="isSubmit"
              class="iconfont iconxiazai cursor-pointer"
              style="margin-left: 10px;font-size: 14px;line-height: 35px"
              @click="downLoadFile(item1)"
            />
          </div>

        </div>
        <!--   学生回复    -->
        <div v-if="commentData" class="radiu-box content-size-14" style="margin-top: 10px;">
          <div
            style="background-color: #f1f1f1;line-height: 40px;border-top-left-radius:10px;
border-top-right-radius:10px;padding-left: 10px;color: #333333"
          >老师评语
          </div>
          <div style="min-height: 20px">
            <div v-if="commentData.dlsTaskStudentAnswerNotes" style="max-height: 250px;overflow-y: auto">
              <div
                v-for="(item,index) in commentData.dlsTaskStudentAnswerNotes.extinfos"
                :key="index"
                class="row"
                style="padding: 5px 10px"
              >
                <HeadImg
                  :avatar="item.avatar"
                  :name="item.teacherName"
                  :size="50"
                  style="min-height: 50px;min-width: 50px"
                />
                <div class="column" style="margin-top: 5px;margin-left:15px;">
                  <div class="row" style="color: #7f7f7f">
                    <span>{{ item.teacherName }}</span>
                    <span style="margin-left: 5px">{{ timestampToTime(item.time) }}</span>
                  </div>
                  <div style="margin-top: 10px;word-break:break-all">
                    {{ item.name }}
                  </div>
                </div>
              </div>
              <div v-if="commentData && commentData.dlsTaskStudentAnswerReplies">
                <div
                  v-for="(item2,index2) in commentData.dlsTaskStudentAnswerReplies"
                  :key="'index-' + index2"
                  class="row"
                  style="padding: 5px 10px"
                >
                  <HeadImg
                    :avatar="item2.avatar"
                    :name="item2.studentName"
                    :size="50"
                    style="min-height: 50px;min-width: 50px"
                  />
                  <div class="column" style="margin-top: 5px;margin-left:15px;">
                    <div class="row" style="color: #7f7f7f">
                      <span>{{ item2.studentName }}</span>
                      <span style="margin-left: 5px">{{ timestampToTime(item2.ctime) }}</span>
                    </div>
                    <div style="margin-top: 10px;word-break:break-all">
                      {{ item2.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="height: 1px;background-color: rgba(215, 215, 215, 1)" />
            <div class="row" style="padding: 5px 10px;width: 100%">
              <HeadImg :avatar="user.avatar" :name="user.name" :size="50" style="min-height: 50px;min-width: 50px" />
              <div class="column" style="margin-top: 5px;margin-left:15px;flex: 1">
                <div class="row">
                  <el-input
                    v-model="reply"
                    style="flex: 1;margin-right: 20px"
                    :readonly="false && readOnly"
                    :unselectable="readOnly?'':''"
                  />
                  <button class="normal-button" style="width: 80px" @click="addReply">回复</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <!--  学生提交结果  -->
    <div v-if="selected === '1'" style="width: 80%;margin-left: 18px;margin-top: 15px;font-size: 16px" class="column">
      <div class="radiu-box" style="padding: 10px">
        <div class="row" style="align-items: center;justify-content: space-between">
          <div class="row" style="align-items: center;line-height: 40px">
            <span
              v-if="showArrowFromProp === 'true'"
              class="iconfont iconziyuan22 circle-bg"
              style="text-align: center;align-items: center;cursor: pointer"
              @click="preQuestion"
            />
            <span style="margin-left: 40px;color: #797979">{{ homeWorkTitle }}</span>
            <el-input
              v-model="score"
              style="width: 100px;margin: 0 15px"
              type="text"
              :readonly="false && readOnly"
              :unselectable="readOnly?'':''"
              @keyup.enter.native="onInputBlur"
              @input="changeScore"
              @focus="onInputFocus"
            />
            <span style="color: #797979">分</span>

            <span style="margin-left: 20px;color: #aaaaaa;font-size: 12px;">(-1为不计分)</span>
          </div>
          <span
            v-if="showArrowFromProp === 'true'"
            class="iconfont iconziyuan12 circle-bg"
            style="text-align: center;cursor: pointer"
            @click="nextQuestion"
          />
        </div>
      </div>

      <div class="radiu-box column" style="padding: 10px;margin-top: 10px;font-size: 14px;">
        <div class="row">
          <i class="iconfont colorF90 default-icon" :class="getIconByType(itemfromProp.type+'')" />
          <div
            v-if="(!!itemfromProp.title || !!itemfromProp.plainText) && itemfromProp.type != 7"
            style="margin-left: 4px;margin-right: 15px;font-size: 19px;color: #555555;font-weight: 650"
            class="list-group-content default-text"
            v-html="itemfromProp.title || itemfromProp.plainText"
          />
          <div
            v-if="itemfromProp.type == 7 || !!itemfromProp.dlsCourseScreencaptureQuestion"
            style="margin-left: 4px;margin-right: 15px;font-size: 19px;color: #555555;font-weight: 650"
            class="list-group-content default-text"
            v-html="'截屏题'"
          />
        </div>
        <div class="row" v-if="!!itemfromProp.dlsCourseScreencaptureQuestion || itemfromProp.type == 7" style="margin-top: 20px">
          <el-image
            v-if="!!itemfromProp.dlsCourseScreencaptureQuestion && !!itemfromProp.dlsCourseScreencaptureQuestion.picture"
            style="margin-left: 4px;margin-right: 15px;"
            :src="itemfromProp.dlsCourseScreencaptureQuestion.picture"
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <el-image
            v-if="!!!itemfromProp.dlsCourseScreencaptureQuestion && itemfromProp.type == 7 && !!itemfromProp.plainText"
            style="margin-left: 4px;margin-right: 15px;"
            :src="itemfromProp.plainText"
          >
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </div>
        <div class="row" style="margin-top: 10px">
          <div class="column " :class="currentBox===0?'box_active':'box_normal'" @click="changeCurrentBox(0)">
            <span style="font-size: 23px">{{ itemfromProp.noCheckCount }}</span>
            <span style="font-size: 14px;margin-top: 8px">待批改</span>
          </div>
          <div style="width: 1px;height: 60px;background: #CCCCCC;margin-top: 6px" />
          <div class="column" :class="currentBox===1?'box_active':'box_normal'" @click="changeCurrentBox(1)">
            <span style="font-size: 23px">{{ itemfromProp.noSubCount }}</span>
            <span style="font-size: 14px;margin-top: 8px">未交</span>
          </div>
          <div style="width: 1px;height: 60px;background: #CCCCCC;margin-top: 6px" />
          <div class="column" :class="currentBox===2?'box_active':'box_normal'" @click="changeCurrentBox(2)">
            <span style="font-size: 23px">{{ itemfromProp.checkCount }}</span>
            <span style="font-size: 14px;margin-top: 8px">已批改</span>
          </div>
        </div>
        <!--     主观题   -->

        <div v-if="isSubjective" class="row" style="width: 100%;padding: 15px 20px;flex-wrap: wrap;">
          <div v-if="currentBox === 0">
            <!--          填空题  -->
            <div
              v-if="itemfromProp.dlsCourseQuestion && itemfromProp.dlsCourseQuestion.catCode === '6'"
              class="row"
              style="flex-wrap: wrap;width: 100%"
            >
              <div
                v-for="(item1,index1) in itemfromProp.students"
                :key="index1"
                style="min-height: 80px;width: 160px;height: auto;align-items:start"
                class="column item-bg"
              >
                <div
                  v-for="(item2,index2) in item1.optionIndexs"
                  :key="index2"
                  class="column content-size-14"
                  style="line-height: 24px"
                >
                  <div class="row" style="width: 100%">
                    <span>{{ item2.optionIndex }}、</span>
                    <el-tooltip
                      v-if="item2.isrichtext===0"
                      class="item"
                      effect="dark"
                      :content="item2.optionContent"
                      placement="top"
                    >
                      <span class="single">{{ item2.optionContent }}</span>
                    </el-tooltip>
                    <span v-else v-html="item2.optionContent" />
                  </div>
                </div>

                <div style="height: 1px;background-color:#d7d7d7;margin-top: 5px;width: 160px;margin-left: -5px" />
                <div class="row" style="margin-top: 5px;width: 100%">
                  <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" />
                  <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                    <span
                      class="maxTextWidth56"
                      style="margin-left: 7px;line-height: 24px;"
                    >{{ item1.studentName }}</span>
                  </el-tooltip>
                  <div style="flex: 1;display: flex;flex-direction: row-reverse">
                    <div style="position: relative" class="circle-bg" @click="openChangeScore(item1)">
                      <span
                        style="color: white;position: absolute;right: 0;z-index: 9;width: 24px;text-align: center;line-height: 24px;"
                      >{{ item1.score?item1.score:'-' }}</span>

                      <div
                        style="width: 24px;height: 24px;border-radius: 12px;position: absolute;right: 0"
                        :style="{backgroundColor:item1.score?'#70B605':'#D4D4D4'}"
                      />
                    </div>
                  </div>

                </div>
              </div>
            </div>
            <!--       主观题 试卷     -->
            <div v-else class="row" style="flex-wrap: wrap;width: 100%">
              <div
                v-for="(item1,index1) in itemfromProp.students"
                :key="index1"
                class="column item-bg"
                @click="toCorrectPage(item1)"
              >
                <div class="row">
                  <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" />
                  <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                    <span
                      class="maxTextWidth56"
                      style="margin-left: 7px;line-height: 24px"
                    >{{ item1.studentName }}</span>
                  </el-tooltip>
                </div>
                <span style="margin-top: 15px;">共{{ item1.num?item1.num:0 }}个附件</span>
              </div>
            </div>
          </div>

          <div v-if="currentBox === 1" class="row" style="flex-wrap: wrap;width: 100%">
            <div
              v-for="(item1,index1) in itemfromProp.students"
              :key="index1"
              class="column item-bg"
              style="height: 40px"
            >
              <div class="row">
                <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" />
                <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                  <span
                    class="maxTextWidth56"
                    style="margin-left: 7px;line-height: 24px"
                  >{{ item1.studentName }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>

          <div v-if="currentBox === 2" class="row" style="flex-wrap: wrap;width: 100%">
            <div
              v-if="itemfromProp.dlsCourseQuestion && itemfromProp.dlsCourseQuestion.catCode === '6'"
              class="row"
              style="flex-wrap: wrap;width: 100%"
            >
              <div
                v-for="(item1,index1) in itemfromProp.students"
                :key="index1"
                style="min-height: 80px;width: 160px;height: auto;align-items:start"
                class="column item-bg"
              >
                <div
                  v-for="(item2,index2) in item1.optionIndexs"
                  :key="index2"
                  class="column content-size-14"
                  style="line-height: 24px"
                >
                  <div class="row" style="width: 100%">
                    <span>{{ item2.optionIndex }}、</span>
                    <el-tooltip
                      v-if="item2.isrichtext===0"
                      class="item"
                      effect="dark"
                      :content="item2.optionContent"
                      placement="top"
                    >
                      <span class="single">{{ item2.optionContent }}</span>
                    </el-tooltip>
                    <span v-else v-html="item2.optionContent" />
                  </div>
                </div>

                <div style="height: 1px;background-color:#d7d7d7;margin-top: 5px;width: 160px;margin-left: -5px" />
                <div class="row" style="margin-top: 5px;width: 100%">
                  <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" />
                  <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                    <span
                      class="maxTextWidth56"
                      style="margin-left: 7px;line-height: 24px;"
                    >{{ item1.studentName }}</span>
                  </el-tooltip>
                  <div style="flex: 1;display: flex;flex-direction: row-reverse">
                    <div style="position: relative" class="circle-bg" @click="openChangeScore(item1)">
                      <i v-if="itemfromProp.taskScore != -1 && item1.isSuccess == 1" style="color: #00CF90;position: absolute;right: 0;z-index: 9;width: 24px;text-align: center;line-height: 24px;" class="icon iconfont iconziyuan17" name="" />
                      <i v-if="itemfromProp.taskScore != -1 && item1.isSuccess == 0" style="color:red;position: absolute;right: 0;z-index: 9;width: 24px;text-align: center;line-height: 24px;" class="icon iconfont iconziyuan18" name="" />
                      <span
                        v-if="itemfromProp.taskScore != -1 || (itemfromProp.taskScore == -1 && item1.isSuccess != 1 && item1.isSuccess != 0)"
                        style="color: white;position: absolute;right: 0;z-index: 9;width: 24px;text-align: center;line-height: 24px;"
                      >{{ (item1.score && item1.score != -1)?item1.score:'-' }}</span>

                      <div
                        style="width: 24px;height: 24px;border-radius: 12px;position: absolute;right: 0"
                        :style="{backgroundColor:item1.score?'#70B605':'#D4D4D4'}"
                      />
                    </div>
                  </div>

                </div>
              </div>
            </div>

            <div
              v-for="(item1,index1) in itemfromProp.students"
              v-else
              :key="index1"
              class="column item-bg"
              style="width: auto"
              @click="toCorrectPage(item1)"
            >
              <div class="row">
                <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" style="margin-top: 3px" />
                <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                  <span
                    class="maxTextWidth56"
                    style="margin-left: 7px;line-height: 32px"
                  >{{ item1.studentName }}</span>
                </el-tooltip>
                <el-input
                  v-model="item1.score"
                  style="width: 60px;"
                  size="small"
                  :readonly="readOnly || score==-1"
                  :unselectable="readOnly?'on':''"
                  @blur.stop="canCorrect = true"
                  @keyup.enter.native="onInputStudentBlur(item1)"
                  @input="changeStudentScore(item1)"
                  @focus.stop="onInputStudentFocus(item1)"
                />
                <span style="line-height: 32px">分</span>
              </div>
              <span style="margin-top: 15px;">共{{ item1.num?item1.num:0 }}个附件</span>
            </div>
          </div>
        </div>
        <!--     选择 判断题   -->
        <div v-if="!isSubjective && itemfromProp.dlsCourseQuestion" class="column" style="padding: 15px 0">
          <div
            v-if="(currentBox === 0 || currentBox === 2) && itemfromProp.dlsCourseQuestion.catCode !== '5'"
            style="flex-wrap: wrap;width: 100%"
          >
            <div v-for="(item,index) in itemfromProp.dlsCourseQuestion.questionOptionList" :key="index" class="column">
              <div>
                <div
                  class="row"
                  style="min-height: 40px;align-items: center;background-color: #f5faf6;padding: 0 10px;margin-bottom: 10px;border-radius: 10px"
                >
                  <i
                    class="iconfont"
                    style="color:#00CF90;margin-left: 20px"

                    :class="item.iscorrect===1?catCodeSelectedClass:catCodeClass"
                  />
                  <div style="margin-left: 30px">{{ item.optionIndex }}</div>
                  <div style="flex: 1;margin-left: 20px" v-html="item.optionContent" />
                  <span
                    style="margin: 0 30px"
                  >{{ (item && item.studentNameList)?item.studentNameList.length:'0' }} 人</span>
                  <span
                    class="iconfont"
                    :class="item.expand?'iconziyuan15':'iconziyuan16'"
                    style="color: #999999;font-size: 14px"
                    @click="showStudentDetails(item)"
                  />
                </div>
                <div
                  v-if="item.expand"
                  style="flex-wrap: wrap;align-items: center;margin: 0 50px;width: 100%;padding-bottom: 10px"
                  class="row"
                >
                  <div
                    v-for="(item1,index1) in item.studentNameList"
                    :key="index1"
                    class="row"
                    style="margin-left: 8px;width: 160px;height: 40px;align-items: center;line-height: 40px"
                  >
                    <HeadImg :avatar="item1.avatar" :name="item1.name" :size="26" />
                    <el-tooltip class="item" effect="dark" :content="item1.name" placement="top">
                      <div class="row">
                        <span
                          class="maxTextWidth56"
                          style="margin-left: 3px"
                          :style="{color:isDelay(item1.ctime,item1.stopTime)?'#BFBF00':''}"
                        >{{ item1.name }}</span>
                        <span style="margin-left: 3px;color: #AAAAAA">{{ isDelay(item1.ctime,item1.stopTime) }}</span>
                      </div>
                    </el-tooltip>

                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            v-if="(currentBox === 0 || currentBox === 2) && itemfromProp.dlsCourseQuestion.catCode === '5'"
            style="flex-wrap: wrap;line-height: 30px;width: 100%"
            class="row"
          >
            <div class="column" style="width: 50%">
              <span style="margin: 3px 0">左侧选项</span>
              <div
                v-for="(item,index) in itemfromProp.dlsCourseQuestion.questionOptionList"
                :key="index"
                style="margin-left: 20px"
                class="row"
              >
                <div v-if="item.optionId" class="row" style="margin-top: 3px;width: 100%">
                  <span>{{ item.optionIndex }}.</span>
                  <div style="margin-left: 8px;flex:1" v-html="item.optionContent" />
                </div>
              </div>
            </div>
            <div class="column" style="width: 50%">
              <span style="margin: 3px 0">右侧选项</span>
              <div
                v-for="(item,index) in itemfromProp.dlsCourseQuestion.questionOptionList"
                :key="index"
                style="margin-left: 20px"
                class="row"
              >
                <div v-if="!item.optionId" class="row" style="margin-top: 3px;width: 100%">
                  <span>{{ item.optionIndex }}.</span>
                  <div style="margin-left: 8px;flex:1" v-html="item.optionContent" />
                </div>
              </div>
            </div>
          </div>

          <div v-if="currentBox === 1" class="row" style="flex-wrap: wrap;width: 100%">
            <div
              v-for="(item1,index1) in itemfromProp.students"
              :key="index1"
              class="column item-bg"
              style="height: 40px"
            >
              <div class="row">
                <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="24" />
                <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                  <span
                    style="margin-left: 7px;line-height: 24px"
                  >{{ item1.studentName&&item1.studentName.length>4?item1.studentName.substr(0,4):item1.studentName }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div v-if="currentBox === 2">
            <span>得分情况</span>
            <div
              v-if="itemfromProp.students && itemfromProp.students.length>0"
              class="radiu-box"
              style="padding: 0 10px;margin:10px 0;padding-bottom: 10px"
            >
              <div class="row" style="flex-wrap: wrap;width: 100%">
                <div
                  v-for="(item,index) in itemfromProp.students"
                  :key="index"
                  style="margin-top: 10px;margin-right: 40px"
                >
                  <div style="width: 270px" class="row">
                    <HeadImg :avatar="item.avatar" :name="item.studentName" :size="24" style="margin-top: 8px;" />
                    <el-tooltip class="item" effect="dark" :content="item.studentName" placement="top">
                      <span
                        :style="{color:isDelay(item.ctime,item.stopTime)?'#BFBF00':''}"
                        style="line-height: 40px;margin-left: 3px"
                      >
                        {{ item.studentName.length>4?item.studentName.substr(0,4):item.studentName }}
                      </span>
                    </el-tooltip>
                    <el-tooltip
                      class="
                        item"
                      effect="dark"
                      :content="getOptionIndexs(item.optionIndexs)"
                      placement="top"
                    >
                      <div class=" option">

                        <span class="single">{{ getOptionIndexs(item.optionIndexs) }}</span>

                      </div>
                      </span></el-tooltip>
                    <el-input
                      v-if="score!=-1"
                      v-model="item.score"
                      maxlength="4"
                      style="width: 50px"
                      readonly
                      unselectable="on"
                      @input="onInput"
                    />
                    <span style="line-height: 40px;margin-left: 3px">{{ score == -1?'不计分':'分' }}</span>
                    <span style="line-height: 40px;margin-left: 3px;color: #AAAAAA">{{ isDelay(item.ctime,item.stopTime) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 截屏题目 -->
        <div
          v-if="!isSubjective && itemfromProp.dlsCourseScreencaptureQuestion"
          class="column"
          style="padding: 15px 0"
        >
          <!--简答论述-->
          <div
            v-if="(currentBox === 0 || currentBox === 2) && (itemfromProp.dlsCourseScreencaptureQuestion.catCode == '8' || itemfromProp.dlsCourseScreencaptureQuestion.catCode == '9')"
            class="row" style="flex-wrap: wrap;width: 100%"
          >
            <div
              v-for="(item1,index1) in itemfromProp.students"
              :key="index1"
              style="min-height: 80px;width: 160px;height: auto;align-items:start"
              class="column item-bg"
            >
              <div
                v-for="(item2,index2) in item1.optionIndexs"
                :key="index2"
                class="column content-size-14"
                style="line-height: 24px"
              >
                <div class="row" style="width: 100%">
                  <el-tooltip
                    v-if="true || item2.isrichtext===0"
                    class="item"
                    effect="dark"
                    :content="item2.optionContent"
                    placement="top"
                  >
                    <span class="single maxTextWidth160">{{ item2.optionContent }}</span>
                  </el-tooltip>
                </div>
              </div>
              <div style="height: 1px;background-color:#d7d7d7;margin-top: 5px;width: 160px;margin-left: -5px" />
              <div class="row" style="margin-top: 5px;width: 100%">
                <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" />
                <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                  <span
                    class="maxTextWidth56"
                    style="margin-left: 7px;line-height: 24px;"
                  >{{ item1.studentName }}</span>
                </el-tooltip>
                <div style="flex: 1;display: flex;flex-direction: row-reverse">
                  <div style="position: relative" class="circle-bg" @click="openChangeScore(item1)">
                    <span
                      style="color: white;position: absolute;right: 0;z-index: 9;width: 24px;text-align: center;line-height: 24px;"
                    >{{ (item1.score && item1.score != -1)?item1.score:'-' }}</span>

                    <div
                      style="width: 24px;height: 24px;border-radius: 12px;position: absolute;right: 0"
                      :style="{backgroundColor:item1.score?'#70B605':'#D4D4D4'}"
                    />
                  </div>
                </div>

              </div>
            </div>
          </div>
          <div v-if="currentBox === 0 && itemfromProp.dlsCourseScreencaptureQuestion.catCode == '3'" class="row" style="flex-wrap: wrap;width: 100%">
            <div
              v-for="(item1,index1) in itemfromProp.students"
              :key="index1"
              class="column item-bg clickable-bg"
              @click="toCorrectPage(item1)"
            >
              <div class="row">
                <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" />
                <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                  <span
                    class="maxTextWidth56"
                    style="margin-left: 7px;line-height: 24px"
                  >{{ item1.studentName }}</span>
                </el-tooltip>
              </div>
              <span style="margin-top: 15px;">共{{ item1.num?item1.num:0 }}个附件</span>
            </div>
          </div>
          <div
            v-if="(currentBox === 0 || currentBox === 2) && itemfromProp.dlsCourseScreencaptureQuestion.catCode != '8' && itemfromProp.dlsCourseScreencaptureQuestion.catCode != '9'"
            style="flex-wrap: wrap;width: 100%"
          >
            <div
              v-for="(item,index) in itemfromProp.dlsCourseScreencaptureQuestion.screenOptions"
              :key="index"
              class="column"
            >
              <div v-if="!!item.id">
                <div
                  class="row"
                  style="min-height: 40px;align-items: center;background-color: #f5faf6;padding: 0 10px;margin-bottom: 10px;border-radius: 10px"
                >
                  <i
                    class="iconfont"
                    style="color:#00CF90;margin-left: 20px"
                  />
                  <div style="margin-left: 30px">{{ item.optionIndex }}</div>
                  <div style="flex: 1;margin-left: 20px" v-html="!!item.optionContent ? '': ''" />
                  <span
                    style="margin: 0 30px"
                  >{{ (item && item.studentNameList)?item.studentNameList.length:'0' }} 人</span>
                  <span
                    class="iconfont"
                    :class="item.expand?'iconziyuan15':'iconziyuan16'"
                    style="color: #999999;font-size: 14px"
                    @click="showStudentDetails(item)"
                  />
                </div>
                <div
                  v-if="item.expand"
                  style="flex-wrap: wrap;align-items: center;margin: 0 50px;width: 100%;padding-bottom: 10px"
                  class="row"
                >
                  <div
                    v-for="(item1,index1) in item.studentNameList"
                    :key="index1" class="row"
                    style="margin-left: 8px;width: 160px;height: 40px;align-items: center;line-height: 40px"
                  >
                    <HeadImg :avatar="item1.avatar" :name="item1.name" :size="26" />
                    <el-tooltip class="item" effect="dark" :content="item1.name" placement="top">
                      <div class="row">
                        <span
                          class="maxTextWidth56"
                          style="margin-left: 3px"
                          :style="{color:isDelay(item1.ctime,item1.stopTime)?'#BFBF00':''}"
                        >{{ item1.name }}</span>
                        <span style="margin-left: 3px;color: #AAAAAA">{{ isDelay(item1.ctime,item1.stopTime) }}</span>
                      </div>
                    </el-tooltip>

                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="currentBox === 1" class="row" style="flex-wrap: wrap;width: 100%">
            <div
              v-for="(item1,index1) in itemfromProp.students"
              :key="index1"
              class="column item-bg"
              style="height: 40px"
            >
              <div class="row">
                <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="24" />
                <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                  <span
                    class="maxTextWidth56"
                    style="margin-left: 7px;line-height: 24px"
                  >{{ item1.studentName }}</span>
                </el-tooltip>
              </div>
            </div>
          </div>
          <div v-if="currentBox === 2 && itemfromProp.dlsCourseScreencaptureQuestion.catCode != '3' && itemfromProp.dlsCourseScreencaptureQuestion.catCode != '8' && itemfromProp.dlsCourseScreencaptureQuestion.catCode != '9'">
            <span v-if="itemfromProp.students && itemfromProp.students.length>0">得分情况</span>
            <div
              v-if="itemfromProp.students && itemfromProp.students.length>0"
              class="radiu-box"
              style="padding: 0 10px;margin:10px 0;padding-bottom: 10px"
            >
              <div class="row" style="flex-wrap: wrap;width: 100%">
                <div
                  v-for="(item,index) in itemfromProp.students"
                  :key="index"
                  style="margin-top: 10px;margin-right: 40px"
                >
                  <div style="width: 270px" class="row">
                    <HeadImg :avatar="item.avatar" :name="item.studentName" :size="24" style="margin-top: 8px;" />
                    <el-tooltip class="item" effect="dark" :content="item.studentName" placement="top">
                      <span
                        class="maxTextWidth56"
                        :style="{color:isDelay(item.ctime,item.stopTime)?'#BFBF00':''}"
                        style="line-height: 40px;margin-left: 3px"
                      >
                        {{ item.studentName }}
                      </span>
                    </el-tooltip>
                    <el-tooltip
                      class="
                        item"
                      effect="dark"
                      :content="getOptionIndexs(item.optionIndexs)"
                      placement="top"
                    >
                      <div class=" option">

                        <span class="single">{{ getOptionIndexs(item.optionIndexs) }}</span>

                      </div>
                      </span></el-tooltip>
                    <el-input
                      v-if="score!=-1"
                      v-model="item.score"
                      maxlength="4"
                      style="width: 100px"
                      readonly
                      unselectable="on"
                      @input="onInput"
                    />
                    <span style="line-height: 40px;margin-left: 3px">{{ score == -1?'不计分':'分' }}</span>
                    <span style="line-height: 40px;margin-left: 3px;color: #AAAAAA">{{ isDelay(item.ctime,item.stopTime) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="currentBox === 2 && itemfromProp.dlsCourseScreencaptureQuestion.catCode == '3'" class="row" style="flex-wrap: wrap;width: 100%">
            <div
              v-for="(item1,index1) in itemfromProp.students"
              :key="index1"
              class="column item-bg clickable-bg"
              style="width: auto"
              @click="toCorrectPage(item1)"
            >
              <div class="row">
                <HeadImg :avatar="item1.avatar" :name="item1.studentName" :size="26" style="margin-top: 3px" />
                <el-tooltip class="item" effect="dark" :content="item1.studentName" placement="top">
                  <span
                    class="maxTextWidth56"
                    style="margin-left: 7px;line-height: 32px"
                  >{{ item1.studentName }}</span>
                </el-tooltip>
                <el-input
                  v-model="item1.score"
                  style="width: 100px;"
                  size="small"
                  :readonly="readOnly || score==-1"
                  :unselectable="readOnly?'on':''"
                  @blur.stop="canCorrect = true"
                  @keyup.enter.native="onInputStudentBlur(item1)"
                  @input="changeStudentScore(item1)"
                  @focus.stop="onInputStudentFocus(item1)"
                />
                <span style="line-height: 32px">分</span>
              </div>
              <span style="margin-top: 15px;">共{{ item1.num?item1.num:0 }}个附件</span>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!--    题目-->
    <el-dialog
      v-if="questionDialogVisible"
      append-to-body
      :visible.sync="questionDialogVisible"
      center
      :show-close="false"
      fullscreen
      :close-on-press-escape="false"
    >
      <CourseQuestionDialog
        :subject-id="itemfromProp.subjectId"
        :course-id="itemfromProp.courseId"
        :type="parseInt(paperType)"
        :task-id="paperId"
        @dismiss="questionDialogVisible = false"
        @publishSuccess="publishSuccess"
      />
    </el-dialog>
    <!--    测验、作业、任务-->
    <el-dialog
      v-if="taskDialogVisible"
      append-to-body
      :visible.sync="taskDialogVisible"
      center
      :show-close="false"
      fullscreen
      :close-on-press-escape="false"
    >
      <TaskDialog
        :subject-id="itemfromProp.subjectId"
        :course-id="itemfromProp.courseId"
        :type="parseInt(paperType)"
        :task-id="paperId"
        @dismiss="taskDialogVisible = false"
        @publishSuccess="publishSuccess"
      />
    </el-dialog>
    <!--  学生上传附件  -->
    <el-dialog
      v-if="showTaskUploadFileDialog"
      :show-close="false"
      append-to-body
      fullscreen
      :visible.sync="showTaskUploadFileDialog"
    >
      <TaskUploadFile
        :is-commit-home-work="true"
        :course-id="(isPaper || (itemfromProp.type === 0 || itemfromProp.type === 1 || itemfromProp.type === 2)) ? itemfromProp.courseId : itemfromProp.dlsCourseQuestion.courseId"
        :subject-id="itemfromProp.subjectId"
        :init-file-list="choosedFileList"
        :init-pan-list="choosedPanList"
        @dismiss="showTaskUploadFileDialog = false"
        @sure="didChooseFile"
      />
    </el-dialog>

    <el-dialog v-if="showOptionDialog" :visible.sync="showOptionDialog" center fullscreen append-to-body>
      <QuestionOption :content="currentContent" @dismiss="showOptionDialog = false" @confirm="confirmOptions" />
    </el-dialog>
  </div>
</template>

<script>
import HeadImg from '@/components/syWidget/HeadImg'
import QuestionOption from '@/components/questionOptions.vue'
import PaperAnswerView from '@/components/paper/PaperAnswerView'
import { getIconByType } from '@/utils/prepareType'
import { getFileIconByExt } from '@/utils/fileType'
import { mapGetters } from 'vuex'
import { getToken } from '@/utils/auth'
import CourseQuestionDialog from '@/components/course_detail/coursequestion/CourseQuestionDialog'
import TaskDialog from '@/components/course_detail/task/TaskDialog'
import TaskUploadFile from '@/components/course_detail/task/TaskUploadFile'

export default {
  name: 'HomeWork',
  components: {
    HeadImg,
    PaperAnswerView,
    CourseQuestionDialog,
    TaskDialog,
    TaskUploadFile,
    QuestionOption
  },
  props: {
    taskStudentId: {
      type: Number,
      default: 0
    },
    selected: { // tab标签
      type: String,
      default: '0'
    },
    curPosition: {
      type: Number,
      default: 0
    },
    // 筛选数据
    courseId: { // 不是当前题目的courseId 而是为了上一下下一页传过来的帅选数据
      type: Number,
      default: undefined
    },
    chapterId: {
      type: Number,
      default: 0
    },
    stime: {
      type: String,
      default: undefined
    },
    etime: {
      type: String,
      default: undefined
    },
    // 筛选数据
    checkType: {// 待批改 已批改 tab页
      type: Number,
      default: 0
    },
    parperType: {// 任务类型
      type: String,
      default: ''
    },
    dispatchId: {
      type: String,
      default: undefined
    },
    lessonId: {
      type: Number,
      default: undefined
    },
    parperFilter: {// 上面帅选的任务类型
      type: String,
      default: ''
    },
    propTotal: {
      type: Number,
      default: 0
    },

    showArrow: {
      type: String,
      default: 'true'
    },
    parperId: {
      type: Number,
      default: 0
    }

  },
  computed: {
    ...mapGetters([
      'user'
    ]),
    isPaper() {
      return !!this.itemfromProp.testpaperDetail
    }
  },
  inject: ['reload'],
  data() {
    return {
      showOptionDialog: false, // 填空题 富文本对话框
      currentContent: '', // 填空题富文本初值
      inputIndex: 0, // 填空题答题 富文本情况对应的点击索引
      loadComplete: false, // 是否加载完毕
      isSubmit: false, // 是否提交
      // 修改题目 start
      questionDialogVisible: false,
      taskDialogVisible: false,
      // 修改题目 end
      isUpload: false,
      studentList: [], // 所有学生列表
      mySelectedAnswer: [], // 自己选择的答案集合
      headers: {
        'token': getToken()
      },
      actionUrl: '',
      catCodeClass: '',
      catCodeSelectedClass: '',
      fileList: [],
      score: '',
      canCorrect: true, // input会穿透导致item点击
      checkTypeFromProp: 0,
      showRightAnswer: false, // 显示正确选项
      currentBox: 0,
      historyScore: 0, // 获取焦点时的内容
      total: 0,
      page: 1,
      describe: '',
      itemfromProp: {
        type: '0'
      },
      curPositionfromProp: 0,
      idAndType: [],
      paperId: 0, // taskId
      paperType: '', // task类型
      attachmentList: [],
      taskStudentIdfromProp: 0,
      firstId: undefined, // 是否第一个数据
      lastId: undefined, // 是否第一个数据
      isSubjective: undefined, // 填空 主观 和试卷
      leftOptionList: [], // 连线题 左边选项
      rightOptionList: [], // 连线题 右边选项
      lineOptionList: [],
      // isPaper: false,
      commentData: undefined, // 评语
      reply: '',
      readOnly: false, // input框制读属性

      choosedFileList: [], // 已经选择了的文件列表,
      choosedPanList: [], // 已经选择了的网盘文件列表
      showTaskUploadFileDialog: false,
      showArrowFromProp: true,
      homeWorkTitle: ''
    }
  },
  created() {
    this.taskStudentIdfromProp = this.taskStudentId
    this.actionUrl = this.$baseURL + 'api/file/uploadFile'
    this.paperId = this.$props.parperId
    this.paperType = this.$props.parperType
    this.checkTypeFromProp = this.$props.checkType
    this.curPositionfromProp = this.$props.curPosition
    this.total = this.$props.propTotal
    this.total = this.$props.propTotal

    this.showArrowFromProp = this.$props.showArrow
    // 0待批改 1未交 2已批改 对应 后台 (0待批改；1已批改 2未交)
    if (this.checkTypeFromProp === 0) {
      this.currentBox = 0
    } else if (this.checkTypeFromProp === 1) {
      this.isSubmit = true
      this.currentBox = 2
    } else {
      this.currentBox = 1
    }
    if (this.user.userType !== 1) {
      // 老师 在获取上一页 下一页后再获取详情
      if (this.showArrowFromProp === 'true') {
        this.getList()
      } else {
        this.getDetails()
      }
    } else {
      this.showArrowFromProp = 'false'
      this.getDetails()
    }
    this.getStatus()
  },
  mounted() {
    window.vue = this
  },
  methods: {
    // 是否迟交
    isDelay(beginTime, endTime) {
      if (endTime === undefined || endTime === null) {
        return
      }
      // 兼容ie ie只支持 1900/11/11 中间用"/"格式
      beginTime = beginTime.replace(/-/g, '/')
      endTime = endTime.replace(/-/g, '/')
      return (Date.parse(beginTime) - Date.parse(endTime)) >= 0 ? '(迟交)' : ''
    },

    // 获取是否可以交互
    getStatus() {
      const that = this
      this.$postBody('api/course/toBeCompleted/getCourseStatus', {
        id: this.paperId,
        type: parseInt(this.paperType)
      }, function(data) {
        that.readOnly = (data.status !== 0)
      }, function(fail) {

      })
    },
    onInput() {
      this.$forceUpdate()
    },
    delFile(item, index) {
      const that = this

      this.$post('api/course/dlsTaskStudentAnswer/delFile', {
        id: item.id
      }, function(data) {
        that.fileList.splice(index, 1)
      })
    },
    getOptionIndexs(options) {
      if (!!!options) {
        return ''
      }
      var indexs = ''
      for (let i = 0; i < options.length; i++) {
        if (options[i].optionIndex) {
          indexs += options[i].optionIndex
        }
      }
      return indexs
    },
    timestampToTime(timestamp) {
      if ((timestamp + '').indexOf(' ') !== -1) {
        return timestamp
      }
      var date = new Date(timestamp)// 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
      // 兼容ie ie只支持 1900/11/11 中间用"/"格式

      return Y + M + D + h + m
    },
    // 添加回复
    addReply() {
      if (this.reply.trim().length === 0) {
        this.$message.warning('请输入内容')
        return
      }
      const that = this
      this.$postBody('api/course/toBeCompleted/insertReply', {
        taskStudentAnswerId: this.itemfromProp.answerId,
        content: this.reply
      }, function(data) {
        that.reply = ''
        if (!that.commentData.dlsTaskStudentAnswerReplies) {
          that.commentData.dlsTaskStudentAnswerReplies = []
        }
        that.commentData.dlsTaskStudentAnswerReplies.push(data)
      }, function(fail) {

      })
    },
    changeIndex() {
      this.$forceUpdate()
    },
    // 获取批注内容
    fetchComment(answerId) {
      const that = this
      this.$postBody('api/course/toBeCompleted/getNoteList', {
        answerId: answerId
      }, function(data) {
        that.commentData = data
      }, function(fail) {

      })
    },
    getScore() {
      if (this.itemfromProp.taskScore) {
        if (this.itemfromProp.taskScore === -1) {
          return '不计'
        } else {
          if (this.itemfromProp.status === 1 && this.itemfromProp.score != null && this.itemfromProp.score != undefined) {
            return this.itemfromProp.score + '/' + this.itemfromProp.taskScore
          } else {
            return this.itemfromProp.taskScore
          }
        }
      } else {
        return 0
      }
    },
    // 是否可以填题目
    canOperation() {
      if (this.user.userType !== 1) {
        return true
      }
      if (this.user.userType === 1 && this.itemfromProp.status === 1) {
        return true
      }
      return false
    },
    getPageWidth() {
      // 填空题 后加的不影响之前只能这样处理最方便
      if (this.itemfromProp.dlsCourseQuestion && this.itemfromProp.dlsCourseQuestion.catCode === '6') {
        return '80%'
      }
      if (this.user.userType === 1) {
        if (this.isSubjective) {
          return '60%'
        } else {
          return '80%'
        }
      } else {
        return '80%'
      }
    },
    getRightAnswer(optionId) {
      for (let i = 0; i < this.rightOptionList.length; i++) {
        if (this.rightOptionList[i].id === optionId) {
          return this.rightOptionList[i].optionIndex
        }
      }
    },
    // 判断是否红色 绿色还是不变色 该方法针对不能操作
    getOptionColor(item) {
      if (this.showRightAnswer) {
        if (item.iscorrect === 1) {
          // item.isChecked = true
          return '#00CF90'
        } else {
          // item.isChecked
          for (let i = 0; i < this.mySelectedAnswer.length; i++) {
            // this.mySelectedAnswer.isChecked = true
            // 选择了错误的选项
            if (this.mySelectedAnswer[i] === item.optionIndex) {
              return '#E60012'
            }
          }
        }
      }
    },
    // 查询每个任务的文件列表 和说明
    getfiles() {
      const that = this
      this.$postBody('api/course/toBeCompleted/getfiles', {
        id: this.paperId,
        type: this.paperType
      }, function(data) {
        that.describe = data.explains
      }, function(fail) {

      })
    },
    // 预览文件
    handlePreview(file) {
      if (file.url) {
        window.open(process.env.VUE_APP_FILE_PREVIEW_URL + encodeURIComponent(Base64.encode(file.url)))
      } else {
        this.$alert('未上传的文件不支持预览，请在自己本地查看', '提示', {
          confirmButtonText: '确定',
          callback: action => {
          }
        })
      }
    },
    // 删除文件/**/
    handleRemove(file, fileList) {
      this.fileList = fileList
      if (!file.url) {
        this.isUpload = false
      }
    },
    // 文件长传前面的操作
    beforeUpload(file) {
      if (this.readOnly) {
        this.$message.warning('该课程已归档')
        return false
      }
    },
    selectAnswer(item, index) {
      if (this.itemfromProp.status === 1) { // 已批改的
        return
      }
      if (this.itemfromProp.type === 6) {
        return
      }
      if (this.user.userType === 1 && parseInt(this.checkTypeFromProp) === 0) {
        // 单选题
        if (this.itemfromProp.dlsCourseQuestion.catCode === '1' || this.itemfromProp.dlsCourseQuestion.catCode === '4') {
          for (let i = 0; i < this.itemfromProp.dlsCourseQuestion.questionOptionList.length; i++) {
            if (this.itemfromProp.dlsCourseQuestion.questionOptionList[i].isChecked) {
              this.itemfromProp.dlsCourseQuestion.questionOptionList[i].isChecked = false
              break
            }
          }
          item.isChecked = true
          this.$forceUpdate()
        } else if (this.itemfromProp.dlsCourseQuestion.catCode === '2' || this.itemfromProp.dlsCourseQuestion.catCode === '7') {
          // 多选和不定选
          if (item.isChecked) {
            item.isChecked = !item.isChecked
          } else {
            item.isChecked = true
          }
          this.$forceUpdate()
        }
      }
    },
    handleError() {
      this.isUpload = false
    },
    // 文件上传成功
    handleSuccess(response, file, fileList) {
      this.isUpload = false
      if (response.code === 1) {
        var tempItem = response.data
        tempItem.url = response.data.httpUrl
        tempItem.name = response.data.fileName
        tempItem.resId = response.data.id
        this.fileList.push(tempItem)
      } else {
        if (response.code === 500105) {
          this.$alert('Token无效', '提示', {
            confirmButtonText: '确定',
            callback: action => {
            }
          })
          this.$store.dispatch('user/logout')
        } else {
          this.$message.error(response.msg)
        }
      }
    },
    handleClick() {

    },
    getIconByType(type) {
      if (type === '6') {
        type = '3'
      } else if (type === '10') {
        type = '0'
      } else if (type === '11') {
        type = '1'
      } else if (type === '12') {
        type = '2'
      }
      return getIconByType(type + '')
    },
    getFileIconByExt(ext, resUrl, isLink) {
      if (isLink) {
        return 'iconlianjie'
      }
      console.log(ext === 'undefined' ? resUrl : ext)
      return getFileIconByExt(ext)
    },
    onInputFocus() {
      this.historyScore = this.score
    },
    onInputBlur() {
      if (this.score !== this.historyScore) {
        if (this.score === '-') {
          return
        }
        if (this.readOnly) {
          this.$message.warning('有已经提交并批改的人')
        }
        this.doScore()
      }
    },
    /**
       * 修改总分
       */
    doScore() {
      const that = this
      this.$postBody('api/course/toBeCompleted/updateScore', {
        id: this.itemfromProp.id,
        score: parseInt(this.score),
        type: this.itemfromProp.type
      }, function(success) {
        that.$message.success('打分成功')
        that.itemfromProp.taskScore = that.score
      }, function(fail) {

      })
    },

    changeScore() {
      if (this.score === '-' || this.score === '-1') {
        return
      }
      // 先把非数字的都替换掉，除了数字和.
      this.score = this.score.replace(/[^\d.]/g, '')
      // 必须保证第一个为数字而不是.
      this.score = this.score.replace(/^\./g, '')
      // 保证只有出现一个.而没有多个.
      this.score = this.score.replace(/\.{2,}/g, '')
      // 保证.只出现一次，而不能出现两次以上
      this.score = this.score.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      let index = -1
      for (const i in this.score) {
        if (this.score[i] === '.') {
          index = i
        }
        if (index !== -1) {
          if (i - index > 1) {
            this.score = this.score.substring(0, this.score.length - 1)
          }
        }
      }
      if (this.score <= 0) {
        this.score = ''
      }
      if (this.score > 1000) {
        this.score = ''
      }
    },
    // 点击 tab0待批改 1未交 2已批改 对应 后台 (0待批改；1已批改 2未交)
    changeCurrentBox(index) {
      this.currentBox = index
      if (index === 0) {
        this.checkTypeFromProp = 0
      } else if (index === 2) {
        this.checkTypeFromProp = 1
      } else { // 未交
        this.checkTypeFromProp = 2
      }
      this.itemfromProp.students = []
      this.fetchStudents(index)
    },
    // 上一题
    preQuestion() {
      if (this.paperId === this.firstId) {
        this.$message.warning('已经是第一题了')
        return
      }
      for (let i = 0; i < this.idAndType.length; i++) {
        if (this.idAndType[i].id === this.paperId) {
          console.log(`第一题: ${this.firstId},上一题ID: ${this.idAndType[i].id},当前ID: ${this.paperId},标识: ${i}-${this.idAndType.length}`)
          this.paperId = this.idAndType[i - 1].id
          this.paperType = this.idAndType[i - 1].type
          break
        }
      }
      console.log(`当前ID: ${this.paperId}`)
      this.getDetails()
    },
    // 下一题
    nextQuestion() {
      if (this.paperId === this.lastId) {
        this.$message.warning('已经是最后一题了')
        return
      }
      if (this.paperId === this.idAndType[this.idAndType.length - 1].id) {
        this.page = this.page + 1
        this.getList()
        return
      }
      for (let i = 0; i < this.idAndType.length; i++) {
        if (this.idAndType[i].id === this.paperId) {
          console.log(`最后一道题: ${this.lastId},下一题ID: ${this.idAndType[i].id},当前ID: ${this.paperId},标识: ${i}-${this.idAndType.length}`)
          this.paperId = this.idAndType[i + 1].id
          this.paperType = this.idAndType[i + 1].type
          break
        }
      }
      console.log(`当前ID: ${this.paperId}`)
      this.getDetails()
    },
    /**
       * @param needLoadNext 是否需要展示下一题
       */
    getList(needLoadNext) {
      const that = this
      this.$postBody('api/course/toBeCompleted/getIdAndTypeList', {
        courseId: this.$props.courseId === 0 ? undefined : this.$props.courseId,
        chapterId: this.chapterId === 0 ? undefined : this.chapterId,
        checkType: this.checkTypeFromProp,
        parperType: this.$props.parperFilter,
        stime: this.$props.stime,
        etime: this.$props.etime,
        page: this.page,
        rows: this.curPositionfromProp + 10//
      }, function(data) {
        that.total = data.total
        that.idAndType.push(...data.list)
        that.getDetails()
        if (that.page === 1 && data.list.length > 0) {
          that.firstId = data.list[0].id
        }
        if (data.isLastPage && data.list.length > 0) {
          that.lastId = data.list[data.list.length - 1].id
        }
        if (needLoadNext) {
          that.nextQuestion()
        }
      }, function(fail) {

      })
    },
    commitHomeWork() {
      if (this.readOnly) {
        this.$message.warning('该课程已归档')
        return false
      }
      const optionsList = []
      const detailsList = []

      const that = this
      if (this.itemfromProp.type === 0 || this.itemfromProp.type === 1 || this.itemfromProp.type === 2) {
        // 作业 测验 任务
        if (this.fileList.length === 0 && !this.isPaper) {
          this.$message.warning('作业、测验、任务必须上传附件')
          return
        }
        if (this.isPaper) {
          this.dealPaperDetails(optionsList, detailsList)
        }
      } else {
        if (!this.isPaper) { // 题目
          if (this.itemfromProp.dlsCourseQuestion.catCode === '1' ||
              this.itemfromProp.dlsCourseQuestion.catCode === '2' ||
              this.itemfromProp.dlsCourseQuestion.catCode === '4' ||
              this.itemfromProp.dlsCourseQuestion.catCode === '7') {
            for (let i = 0; i < this.itemfromProp.dlsCourseQuestion.questionOptionList.length; i++) {
              const option = this.itemfromProp.dlsCourseQuestion.questionOptionList[i]
              if (option.isChecked) {
                optionsList.push({
                  questionId: option.questionId,
                  optionId: option.id,
                  optionIndex: option.optionIndex,
                  optionContent: option.optionContent
                })
              }
            }
          }
          // 填空题
          if (this.itemfromProp.dlsCourseQuestion.catCode === '6') {
            for (let i = 0; i < this.itemfromProp.dlsCourseQuestion.questionOptionList.length; i++) {
              const option = this.itemfromProp.dlsCourseQuestion.questionOptionList[i]
              optionsList.push({
                questionId: option.questionId,
                optionId: option.id,
                isrichtext: option.isrichtext,
                optionIndex: option.optionIndex,
                optionContent: option.optionContent
              })
            }
          }
          if (this.itemfromProp.dlsCourseQuestion.catCode === '3' && this.fileList.length === 0) {
            this.$message.warning('主观题必须上传附件')
            return
          }
          // 连线
          if (this.itemfromProp.dlsCourseQuestion.catCode === '5') {
            for (let i = 0; i < this.leftOptionList.length; i++) {
              const option = this.leftOptionList[i]
              optionsList.push({
                questionId: option.questionId,
                optionId: option.id,
                optionIndex: option.otherIndex,
                otherOptionId: this.getRightOptionId(option.otherIndex)
              })
            }
          }
          detailsList.push({
            questionId: this.itemfromProp.dlsCourseQuestion.id,
            catCode: this.itemfromProp.dlsCourseQuestion.catCode,
            catName: this.itemfromProp.dlsCourseQuestion.catName,
            questionScore: this.itemfromProp.dlsCourseQuestion.score
          })
        } else {
          this.dealPaperDetails(optionsList, detailsList)
        }

        if (!this.isPaper && (this.itemfromProp.dlsCourseQuestion.catCode === '1' ||
            this.itemfromProp.dlsCourseQuestion.catCode === '2' ||
            this.itemfromProp.dlsCourseQuestion.catCode === '4' ||
            this.itemfromProp.dlsCourseQuestion.catCode === '5' ||
            this.itemfromProp.dlsCourseQuestion.catCode === '7')) {
          if (optionsList.length === 0 && this.itemfromProp.dlsCourseQuestion.catCode !== '5') {
            this.$message.warning('请选择选项')
            return
          }
        }
      }
      const commitFile = []
      for (let i = 0; i < this.fileList.length; i++) {
        if (!this.fileList[i].taskStudentAnswerId) {
          commitFile.push(this.fileList[i])
        }
      }
      this.$postBody('api/course/dlsTaskStudentAnswer/insertAnswer', {
        type: parseInt(this.paperType),
        status: 0,
        lessonId: this.lessonId ? this.lessonId : undefined,
        // 老师端存在课堂 选择课堂下发 但是实际上没下发的情况
        taskId: (this.paperType === '6' || parseInt(this.paperType) >= 10) ? parseInt(this.dispatchId) : this.paperId,
        testpaperId: this.isPaper ? this.itemfromProp.testpaperDetail.testpaper.id : undefined,
        taskName: (this.itemfromProp.type === 0 || this.itemfromProp.type === 1 || this.itemfromProp.type === 2) ? this.itemfromProp.title : (this.isPaper ? this.itemfromProp.testpaperDetail.testpaper.pname : this.itemfromProp.dlsCourseQuestion.plainText),
        publishDate: this.itemfromProp.stopTime ? new Date(this.itemfromProp.stopTime) : undefined, // 成绩那边 需要变成发布时间
        maxScore: this.itemfromProp.taskScore,
        dlsTSADetailAddRequestList: detailsList,
        isSubmit: this.itemfromProp.isSubmit,
        taskStudentId: this.taskStudentIdfromProp,
        tsaResourceAddRequestList: commitFile.length === 0 ? undefined : commitFile,
        chapterId: (this.isPaper || (this.itemfromProp.type === 0 || this.itemfromProp.type === 1 || this.itemfromProp.type === 2)) ? this.itemfromProp.chapterId : this.itemfromProp.dlsCourseQuestion.chapterId,
        courseId: (this.isPaper || (this.itemfromProp.type === 0 || this.itemfromProp.type === 1 || this.itemfromProp.type === 2)) ? this.itemfromProp.courseId : this.itemfromProp.dlsCourseQuestion.courseId,
        dlsTSADetailOptionAddRequestList: optionsList
      }, function(data) {
        // 学生提交完成作业
        that.$emit('finishCallback')
        that.$message.success('提交成功')
        that.reload()
      }, function(fail) {

      })
    },
    getRightOptionId(optionIndex) {
      for (let i = 0; i < this.rightOptionList.length; i++) {
        if (optionIndex === this.rightOptionList[i].optionIndex) {
          return this.rightOptionList[i].id
        }
      }
    },
    getTitle(data) {
      // this.homeWorkTitle
      if (data.type === 0 || data.type === 10) {
        this.homeWorkTitle = '测验'
      } else if (data.type === 1 || data.type === 11) {
        this.homeWorkTitle = '作业'
      } else if (data.type === 2 || data.type === 12) {
        this.homeWorkTitle = '任务'
      } else if (data.type === 3 || data.type === 13) {
        this.homeWorkTitle = data.dlsCourseQuestion.catName
      }
    },
    getDetails() {
      let url = ''
      if (this.user.userType === 1) {
        url = 'api/course/dlsTaskStudentAnswer/queryTaskInfo'
      } else {
        url = 'api/course/toBeCompleted/queryTaskInfo'
      }
      const that = this
      this.$postBody(url, {
        id: this.paperId,
        type: parseInt(this.paperType),
        lessonId: this.lessonId ? parseInt(this.lessonId) : parseInt(this.$route.query.l), //改动：undefined改为从路由取值,保证课堂记录详情跳转进入,入参lessonId有值。
        dispatchId: this.dispatchId > 0 ? parseInt(this.dispatchId) : -1, // 如果课上下发 但是还没下发dispatchId为null
        taskStudentId: this.taskStudentId ? parseInt(this.taskStudentId) : undefined
      }, function(data) {
        that.loadComplete = true
        that.itemfromProp = data
        that.$emit('setCodeValue', data.type)
        if (that.user.userType !== 1) {
          if (data.type === 3 || data.type === 6) {
            document.title = '题目批改-' + data.dlsCourseQuestion.catName
          } else {
            document.title = '题目批改-作业测验任务'
          }
        }
        that.getTitle(data)
        that.$emit('requestSuccess', data.cname)
        that.attachmentList = data.taskResources
        if (data.resourceResponses && data.resourceResponses.length > 0) {
          that.fileList = data.resourceResponses
        }
        if (data.answerId && that.user.userType === 1) {
          that.fetchComment(data.answerId)
        }
        that.score = that.itemfromProp.taskScore ? that.itemfromProp.taskScore : 0
        if (data.isSubmit === 1) {
          that.isSubmit = true
        } else {
          that.isSubmit = false
        }
        if (data.status === 1 || that.user.userType !== 1) {
          that.showRightAnswer = true
        }
        // 题目
        if (data.dlsCourseQuestion !== null) {
          // 选择题
          if (data.dlsCourseQuestion.catCode === '1' ||
              data.dlsCourseQuestion.catCode === '4') {
            that.catCodeClass = 'iconziyuan14'
            that.catCodeSelectedClass = 'iconziyuan13'
          } else if (data.dlsCourseQuestion.catCode === '2' ||
              data.dlsCourseQuestion.catCode === '7') {
            that.catCodeClass = 'iconziyuan81'
            that.catCodeSelectedClass = 'iconziyuan71'
          } else if (data.dlsCourseQuestion.catCode === '6') { // 填空题
            if (data.dlsCourseQuestion.questionOptionList) {
              if (data.isSubmit === 1) { // 已提交

              } else {
                for (let i = 0; i < data.dlsCourseQuestion.questionOptionList.length; i++) {
                  data.dlsCourseQuestion.questionOptionList[i].optionContent = ''
                }
              }
            }
          } else if (data.dlsCourseQuestion.catCode === '5') { // 连线
            that.rightOptionList = []
            that.leftOptionList = []
            that.lineOptionList = []
            for (let i = 0; i < data.dlsCourseQuestion.questionOptionList.length; i++) {
              const item = data.dlsCourseQuestion.questionOptionList[i]
              if (!item.optionId) {
                that.rightOptionList.push(item)
              } else {
                that.leftOptionList.push(item)
                that.lineOptionList.push(item)
              }
            }
            if (that.canOperation()) {
              for (let i = 0; i < that.leftOptionList.length; i++) {
                for (let j = 0; j < that.rightOptionList.length; j++) {
                  if (that.leftOptionList[i].optionId === that.rightOptionList[j].id) {
                    that.leftOptionList[i].otherIndex = that.rightOptionList[j].optionIndex
                    break
                  }
                }
              }
            }
          }
          if (data.dlsCourseQuestion) {
            if (data.dlsCourseQuestion.catCode === '1' ||
                data.dlsCourseQuestion.catCode === '2' ||
                data.dlsCourseQuestion.catCode === '7' ||
                data.dlsCourseQuestion.catCode === '4' ||
                data.dlsCourseQuestion.catCode === '5') {
              that.isSubjective = false
            } else {
              that.isSubjective = true
            }
          } else {
            that.isSubjective = true
          }
          if (that.user.userType === 1 && that.showRightAnswer && !that.isSubjective) {
            // 学生并且已提交 获取学生选择的答案
            that.fetchMyAnswer(data.dlsCourseQuestion.catCode, data.dlsCourseQuestion.id)
          }
        } else if (data.testpaperDetail) { // 有组成的试卷
          // that.isPaper = true
          that.isSubjective = true
          for (let i = 0; i < data.testpaperDetail.testpaperQuestionList.length; i++) {
            if (data.testpaperDetail.testpaperQuestionList[i].catCode === '6' && !that.isSubmit) {
              for (let j = 0; j < data.testpaperDetail.testpaperQuestionList[i].questionOptionList.length; j++) {
                data.testpaperDetail.testpaperQuestionList[i].questionOptionList[j].optionContent = ''
              }
            }
          }
        }
        if (that.user.userType !== 1) {
          that.fetchStudents()
        }

        if (that.paperType == 0 || that.paperType == 1 || that.paperType == 2 ||
            that.paperType == 10 || that.paperType == 11 || that.paperType == 12) {
          that.isSubjective = true
        }
        console.log(`是不是主观题${that.isSubjective}`);
        that.getfiles()
      }, function(fail) {

      })
    },
    // 处理 detailsList数据
    dealPaperDetails(optionsList, detailsList) {
      // 试卷

      const testpaperData = this.$refs.paper.testpaperData
      for (let i = 0; i < testpaperData.testpaperQuestionList.length; i++) {
        const paperQuestion = testpaperData.testpaperQuestionList[i]
        if (paperQuestion.catCode === '1' || paperQuestion.catCode === '2' ||
            paperQuestion.catCode === '4' || paperQuestion.catCode === '7') {
          for (let j = 0; j < paperQuestion.questionOptionList.length; j++) {
            const paperOption = paperQuestion.questionOptionList[j]
            if (paperOption.isChecked) {
              optionsList.push({
                questionId: paperOption.questionId,
                optionId: paperOption.id,
                optionIndex: paperOption.optionIndex,
                optionContent: paperOption.optionContent
              })
            }
          }
        }

        // 连线
        if (paperQuestion.catCode === '5') {
          for (let i = 0; i < paperQuestion.questionOptionList.length; i++) {
            const option = paperQuestion.questionOptionList[i]
            if (option.optionId) { // 有optionId 在左边才会有optionId
              optionsList.push({
                questionId: option.questionId,
                optionId: option.id,
                optionIndex: option.otherIndex,
                otherOptionId: this.getPaperRightOptionId(option.otherIndex, paperQuestion.questionOptionList)
              })
            }
          }
        }
        // 填空
        if (paperQuestion.catCode === '6') {
          for (let i = 0; i < paperQuestion.questionOptionList.length; i++) {
            const option = paperQuestion.questionOptionList[i]
            optionsList.push({
              questionId: option.questionId,
              optionId: option.id,
              optionIndex: option.optionIndex,
              optionContent: option.optionContent,
              isrichtext: option.isrichtext
            })
          }
        }
        detailsList.push({
          questionId: paperQuestion.questionId,
          catCode: paperQuestion.catCode,
          catName: paperQuestion.catName,
          questionScore: paperQuestion.score
        })
      }
    },
    getPaperRightOptionId(index, questionOptionList) {
      for (let i = 0; i < questionOptionList.length; i++) {
        const option = questionOptionList[i]
        if (!option.optionId) { // 右边没有 optionId
          if (index === option.optionIndex) {
            return option.id
          }
        }
      }
    },
    // 获取自己选择的答案
    fetchMyAnswer(code, qId) {
      const that = this
      this.$postBody('api/course/dlsTaskStudentAnswer/getOptionIndex', {
        code: code,
        questionId: qId,
        stuId: this.taskStudentIdfromProp
      }, function(data) {
        if (code === '5') { // 连线题
          for (let i = 0; i < that.leftOptionList.length; i++) {
            for (let j = 0; j < data.length; j++) {
              if (i === j) { // 防止有人改题目报错
                that.leftOptionList[i].selectedAnswer = data[j].optionIndex
                break
              }
            }
          }
        } else {
          if (that.itemfromProp.dlsCourseQuestion && that.itemfromProp.dlsCourseQuestion.questionOptionList) {
            for (let i = 0; i < that.itemfromProp.dlsCourseQuestion.questionOptionList.length; i++) {
              for (let j = 0; j < data.length; j++) {
                if (data[j] === that.itemfromProp.dlsCourseQuestion.questionOptionList[i].optionIndex) {
                  that.itemfromProp.dlsCourseQuestion.questionOptionList[i].isChecked = true
                  break
                }
              }
            }
          }
          that.mySelectedAnswer = data
        }
        console.log('检查是否选中', that.itemfromProp.dlsCourseQuestion.questionOptionList)
        that.$forceUpdate()
      }, function(fail) {

      })
    },

    refresh() {
      const that = this
      this.$nextTick(function() {
        that.$forceUpdate()
      })
    },
    // 批改作业
    toCorrectPage(student) {
      if (parseInt(this.paperType) === 0 || parseInt(this.paperType) === 1 || parseInt(this.paperType) === 2 ||
          parseInt(this.paperType) === 10 || parseInt(this.paperType) === 11 || parseInt(this.paperType) === 12 ||
          (!!this.itemfromProp.dlsCourseScreencaptureQuestion && this.itemfromProp.dlsCourseScreencaptureQuestion.catCode == '3') ||
          (!!this.itemfromProp.dlsCourseQuestion && this.itemfromProp.dlsCourseQuestion.catCode === '3')
      ) {
        if (this.canCorrect) {
          sessionStorage.setItem('title', this.itemfromProp.plainText)
          const routeData = this.$router.resolve({
            path: '/correct_homework/index/',
            query: {
              id: this.itemfromProp.id,
              type: this.itemfromProp.type,
              snumber: student.snumber,
              answerId: student.studentAnswerId
            }
          })
          window.open(routeData.href, '_blank')
        }
      } else {
        this.$message.warning('只有测验、任务、作业以及主观才需要批改')
      }
    },
    // 获取学生
    fetchStudents() {
      // noCheckCount noSubCount checkCount
      const that = this
      this.$postBody('api/course/toBeCompleted/getListDetail', {
        id: this.itemfromProp.type < 4 ? parseInt(this.paperId) : (this.itemfromProp.dispatchId || this.itemfromProp.id),
        type: parseInt(this.paperType),
        status: this.checkTypeFromProp
      }, function(data) {
        that.itemfromProp.students = data
        if (that.checkTypeFromProp === 0) {
          that.itemfromProp.noCheckCount = data.length
        } else if (that.checkTypeFromProp === 1) {
          that.itemfromProp.checkCount = data.length
        } else {
          that.itemfromProp.noSubCount = data.length
        }
        that.$forceUpdate()
      }, function(fail) {

      })
    },
    // 下载
    downLoadFile(item) {
      this.$post('api/file/resource/addDownload', {
        type: 0,
        resId: item.id
      }, function(data) {
        // window.open(item.httpUrl || item.resUrl)
        const url = process.env.VUE_APP_BASE_API + 'api/file/downFile?url=' + (item.httpUrl || item.resUrl) + '&filename=' + encodeURI(item.name)
        window.open(url)
      }, function(fail) {

      })
    },

    // 预览文件
    previewFile(item) {
      if (item.panFileId || item.fileId) {
        if (!item.panResourceId) { // 处理上传时候
          item.panResourceId = item.id
        }
        this.previewPan(item)
      } else {
        window.open(process.env.VUE_APP_FILE_PREVIEW_URL + encodeURIComponent(Base64.encode(item.resUrl ? item.resUrl : item.httpUrl)))
      }
    },
    // 预览网盘文件
    previewPan(item) {
      var url = process.env.VUE_APP_PAN_PREVIEW_URL + 'resId=' + item.panResourceId + '&resType=private&resName=' + encodeURIComponent(item.name)
      window.open(url)
    },
    // 点击展开选择该题的学生
    showStudentDetails(item) {
      if (item.expand) {
        item.expand = !item.expand
      } else {
        item.expand = true
      }
      this.$forceUpdate()
    },
    // 老师修改题目
    edit() {
      if ((this.paperType + '') === '0' || (this.paperType + '') === '1' || (this.paperType + '') === '2' ||
          (this.paperType + '') === '10' || (this.paperType + '') === '11' || (this.paperType + '') === '12') {
        this.taskDialogVisible = true
      }
      if ((this.paperType + '') === '3' || (this.paperType + '') === '6') {
        this.questionDialogVisible = true
      }
    },
    publishSuccess() {
      debugger
      // this.$emit('finishCallback')
      this.taskDialogVisible = false
      this.questionDialogVisible = false
      // this.reload()
      this.getDetails()
    },
    openChangeScore(item) {
      if(this.itemfromProp.taskScore === -1) {
        // 打开打分弹框
        this.$confirm('成绩', '编辑成绩', {
          distinguishCancelAndClose: true,
          confirmButtonText: '对',
          cancelButtonText: '错'
        }).then(() => {
          item.score = -1
          item.isSuccess = 1
          this.onInputStudentBlur(item)
        }).catch(action => {
          if(action !== 'cancel') {
            item.score = -1
            item.isSuccess = 0
            this.onInputStudentBlur(item)
          }
        })
      } else {
        // 打开打分弹框
        this.$prompt('成绩', '编辑成绩', {
          inputPattern: /^(\d+.\d{1,1}|\d+)$/,
          inputErrorMessage: '格式不正确',
          inputValue: item.score
        }).then(({ value }) => {
          if (parseFloat(value) > 1000) {
            return this.$message('输入值不可以大于1000')
          }
          if (parseFloat(value) > item.maxScore) {
            return this.$message('输入值不可以大于满分')
          }
          item.score = value
          this.onInputStudentBlur(item)
        }).catch(() => {

        })
      }
    },
    onInputStudentBlur(item) {
      if (!item.studentAnswerId) {
        return
      }
      const that = this
      // 手动打分
      this.$postBody('api/course/dlsTaskStudentAnswer/updateScore', {
        id: item.studentAnswerId,
        score: item.score,
        isSuccess: item.isSuccess
      }, function(data) {
        if (item.status === 0) {
          that.itemfromProp.noCheckCount = that.itemfromProp.noCheckCount - 1
          that.itemfromProp.checkCount = that.itemfromProp.checkCount + 1
        }
        that.fetchStudents()
      }, function(fail) {

      })
    },

    changeStudentScore(item) {
      // 先把非数字的都替换掉，除了数字和.
      item.score = item.score.replace(/[^\d.]/g, '')
      // 必须保证第一个为数字而不是.
      item.score = item.score.replace(/^\./g, '')
      // 保证只有出现一个.而没有多个.
      item.score = item.score.replace(/\.{2,}/g, '')
      // 保证.只出现一次，而不能出现两次以上
      item.score = item.score.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
      let index = -1
      for (const i in item.score) {
        if (item.score[i] === '.') {
          index = i
        }
        if (index !== -1) {
          if (i - index > 1) {
            item.score = item.score.substring(0, item.score.length - 1)
          }
        }
      }
      if (item.score <= 0) {
        item.score = ''
      }
      if (item.score > 1000) {
        item.score = 0
      }
      this.$forceUpdate()
    },
    onInputStudentFocus(item) {
      this.canCorrect = false
    },
    // 撤销提交
    backCommit() {
      if (this.readOnly) {
        this.$message.warning('该课程已归档')
        return
      }
      const that = this

      this.$post('api/course/dlsTaskStudentAnswer/noSubmit', {
        answerId: this.itemfromProp.answerId
      }, function() {
        that.itemfromProp.isSubmit = 2
        that.isSubmit = false
      }, function() {

      })
    },
    showDialog(index, item) {
      this.inputIndex = index
      if (item.isrichtext === 1) {
        this.currentContent = item.optionContent
      }
      this.showOptionDialog = true
    },
    close(item) {
      item.isrichtext = 0
      item.optionContent = ''
    },
    // 选择题富文本 确认按钮
    confirmOptions(val) {
      this.itemfromProp.dlsCourseQuestion.questionOptionList[this.inputIndex].isrichtext = 1
      this.itemfromProp.dlsCourseQuestion.questionOptionList[this.inputIndex].optionContent = val
      this.showOptionDialog = false
    },
    // 选择了文件 fileList  name fileType/type  resUrl
    didChooseFile(result) {
      var addFileList = result.files
      var addPanList = result.pans
      if (addFileList.length > 0) {
        for (let i = 0; i < addFileList.length; i++) { // 和下方 公用了一个附件方法
          addFileList[i].resUrl = addFileList[i].httpUrl
          addFileList[i].resId = addFileList[i].id
        }
        this.fileList.push(...addFileList)
      }
      if (addPanList.length > 0) {
        this.fileList.push(...addPanList)
      }

      this.showTaskUploadFileDialog = false
      this.choosedFileList = addFileList
      this.choosedPanList = addPanList
    }
  }
}
</script>

<style scoped>
  >>> .el-dialog, .el-pager li {
    background: transparent;
    -webkit-box-sizing: border-box;
  }

  .circle-bg {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: white;
    background: rgba(204, 204, 204, 1);
    border-radius: 50%;
  }

  .box_normal {
    width: 108px;
    height: 72px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .box_active {
    width: 108px;
    height: 72px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #F5FAF6;
  }

  .item-bg {
    min-width: 120px;
    height: 80px;
    background: rgba(238, 238, 238, 1);
    border-radius: 6px;
    align-items: center;
    padding: 5px;
    justify-content: center;
    margin-top: 10px;
    margin-right: 10px;
    color: #000000;
  }

  .clickable-bg {
    cursor: pointer;
  }

  .single {
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .scroll {
    height: calc(100vh - 65px);
    overflow-y: auto;
  }

  .option {
    align-items: center;
    width: 50px;
    line-height: 40px;
    overflow-x: hidden;
    margin: 0 5px;
    overflow-y: hidden
  }

  .list-group-content >>> img {
    width: 100%;
  }

  .maxTextWidth56 {
    max-width: 56px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .maxTextWidth160 {
    max-width: 160px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
